<template>
	<div>
		<base-nav-bar titleT="vip.pageStar" />
		<level-panel :item="panelItem" :level="levelPanelData" bg-class="!bg-gradient-4" />
	</div>

	<div class="mt-5">
		<rewards-list />
	</div>

	<div class="mt-5 mb-[10px]">
		<div class="flex justify-start items-center">
			<base-switch-tabs
				:modelValue="tab"
				@update:modelValue="handleTab"
				:data="TAB_LIST"
				activeTextBold />
		</div>

		<div v-if="tab === 'benefits'">
			<rebate-table />
		</div>
		<div v-else>
			<levels-table />
		</div>
	</div>
</template>

<script setup lang="ts">
import { computed, onMounted, ref, watch } from 'vue'
import {
	useAccountStore,
	useActivityStore,
	useAppStore,
	useProfileStore,
	useWalletStore
} from '@/store'
import { BaseNavBar, BaseSwitchTabs } from '@/components/base'
import { useRoute } from 'vue-router'
import LevelPanel from '@/views/activity/components/level-panel/index.vue'
import RebateTable from '@/views/activity/star/rebate-table.vue'
import LevelsTable from '@/views/activity/star/levels-table.vue'
import RewardsList from '../components/rewards-list/index.vue'
import { debounce } from 'lodash-es'
import { fmtAmount, t } from '@/utils'

const TAB_LIST: any = ref([
	{
		id: 'levels',
		name: computed(() => t(`star.starLevels`))
	},
	{
		id: 'benefits',
		name: computed(() => t('star.starBenefits'))
	}
])

const route = useRoute()
const PANEL_REQUIREMENTS_LIST: any = {
	levels: {
		content: computed(() =>
			t('rewards.starLevels', {
				amount: fmtAmount(useActivityStore().upgradeRule.star.sport.left, {
					useName: true,
					precision: [0, true]
				}),
				star: useActivityStore().upgradeRule.star.sport.right
			})
		),
		img: 'activity/star-level.png',
		icon: 'activity/star-level.svg',
		ableBet: false,
		link: 'rewards-star-xp'
	},
	benefits: {
		content: computed(() => t('rewards.starRebate')),
		img: 'activity/star-rebate.png',
		icon: 'activity/vip-level.svg',
		ableBet: false,
		link: 'rewards-star-xp'
	}
}

const accountStore = useAccountStore()
const activityStore = useActivityStore()
const profileStore = useProfileStore()
const walletStore = useWalletStore()

const tab = ref(typeof route.params.id === 'string' ? route.params.id || 'benefits' : 'benefits')
const panelItem = ref(PANEL_REQUIREMENTS_LIST[tab.value])
const levelPanelData = computed(() => ({
	...activityStore.starPanel(),
	next: {
		...activityStore.starPanel().next,
		icon: activityStore.starList.find(({ level }) => activityStore.starPanel().next.level === level)
			?.logo
	}
}))

const handleTab = (data: any) => {
	tab.value = data
	panelItem.value = PANEL_REQUIREMENTS_LIST[data]
}

const getConfig = async () => {
	await Promise.all([
		// activityStore.getRewardsConfig(),
		// activityStore.getUpgradeRule('star'),
		// !accountStore.isLogin && activityStore.getBonusActivities(),
		activityStore.getStarList(),
		activityStore.starPanel()
	])
}

const updateUser = async () => {
	try {
		if (accountStore.isLogin) {
			await Promise.all([
				profileStore.getUserInfo(),
				activityStore.getUserUpgradeInfo()
				// activityStore.getBonusActivities(),
				// activityStore.getProgressiveData(),
				// activityStore.getRewardsStat()
			])
		}
	} catch (err) {
		console.log(err)
	}
}

watch(
	() => useAppStore().region,
	() => getConfig()
)
watch(
	() => accountStore.isLogin,
	() => updateUser()
)
const debounceUpdateUser = debounce(() => updateUser(), 15000, { leading: true })
watch(
	() => Number(walletStore.balance),
	(value) => value > 0 && debounceUpdateUser(),
	{ immediate: true }
)
onMounted(() => {
	Promise.all([getConfig(), updateUser()])
})
</script>

<style scoped>
:deep(.n-progress-content) {
	position: relative;
}
</style>
